<template>
	<div class="full project-manager">
		<div class='form-box'>
			<el-form :model="form.search" label-width="80px" :inline="true">
				<el-form-item>
					<el-input v-model="form.search.projectName" placeholder="项目名称" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.search.moduleName" placeholder="功能模块名称" clearable></el-input>
				</el-form-item>
				<el-form-item>
					<el-date-picker v-model="form.search.deadline" type="date" placeholder="计划完成日期"
									value-format="yyyy-MM-dd"></el-date-picker>
				</el-form-item>
				<el-form-item style="text-align: left">
					<el-select v-model="form.search.status" placeholder="当前状态" clearable>
						<el-option v-for="item in status" :key="item.value" :label="item.label" :value="item.value">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item>
					<el-input v-model="form.search.note"  placeholder="备注" clearable></el-input>
				</el-form-item>
				<el-button class="search-bt" type="primary" @click="searchTask" round>查询</el-button>
				<el-button class="create-bt" type="success" plain @click="createDialShowing = true" icon="el-icon-plus" round>创建</el-button>
			</el-form>
		</div>
		<el-dialog width="50%" :visible.sync="createDialShowing" :show-close="false">
			<div slot="title" style="display: none;"></div>
			<div class="modal-box">
				<div class="form-panel">
					<div class="form-header">需求单</div>
					<el-form class="form-style" :model="form.create">
						<el-form-item>
							<el-input v-model="form.create.projectName" placeholder="项目名称"></el-input>
						</el-form-item>
						<el-form-item>
							<el-input v-model="form.create.moduleName" placeholder="功能模块名称"></el-input>
						</el-form-item>
						<el-form-item>
							<el-date-picker v-model="form.create.deadline" type="date" placeholder="请选择计划完成日期"
											value-format="yyyy-MM-dd"></el-date-picker>
						</el-form-item>
						<el-form-item>
							<el-input placeholder="需求详情" type="textarea" v-model="form.create.note" maxlength="100" resize="none" :autosize="{ minRows: 5, maxRows: 5 }" show-word-limit></el-input>
						</el-form-item>
						<el-button class="create-bt" type="primary" @click="createTask" round>完成</el-button>
						<el-button class="create-bt" @click="createDialShowing=false" plain round>取消</el-button>
					</el-form>
				</div>
				<div class="desc-panel" :style="'background-image:' + illustrationBg"></div>
			</div>
		</el-dialog>
		<div class="table-box full-height editor-table">
			<el-table v-loading="loading.table" height="100%" :data="modules" tooltip-effect="light" highlight-current-row>
				<el-table-column type="index" width="60" align="center"></el-table-column>
				<el-table-column label="项目名称" prop="projectName" width="120" align="left">
					<template slot-scope="scope">
						<el-input v-if="scope.row.editing" v-model="form.update.projectName" :placeholder="scope.row.projectName"></el-input>
						<span v-if="!scope.row.editing">{{scope.row.projectName}}</span>
					</template>
				</el-table-column>
				<el-table-column label="需求简述" prop="moduleName" min-width="100" align="left">
					<template slot-scope="scope">
						<el-input v-if="scope.row.editing" v-model="form.update.moduleName" :placeholder="scope.row.moduleName"></el-input>
						<span v-if="!scope.row.editing">{{scope.row.moduleName}}</span>
					</template>
				</el-table-column>
				<el-table-column label="需求详情" prop="note" min-width="100" align="left" show-overflow-tooltip>
					<template slot-scope="scope">
						<el-input v-if="scope.row.editing" v-model="form.update.note" :placeholder="scope.row.note"></el-input>
						<span v-if="!scope.row.editing">{{scope.row.note}}</span>
					</template>
				</el-table-column>
				<el-table-column label="计划完成于" prop="deadline" width="160" align="center" class-name="num-font">
					<template slot-scope="scope">
						<el-date-picker v-if="scope.row.editing" v-model="form.update.deadline" :placeholder="scope.row.deadline" type="date" value-format="yyyy-MM-dd"></el-date-picker>
						<span v-if="!scope.row.editing">{{scope.row.deadline}}</span>
					</template>
				</el-table-column>
				<el-table-column label="当前状态" prop="status" width="180" align="right">
					<template slot-scope="scope">
						<i :class="scope.row.status === 0 ? 'icon-ios-hourglass working rotate-animation' : 'icon-ios-checkmark-circle finished'" style="font-size: 14px"></i>
						{{scope.row.status === 0 ? "进行中... (" + getTimeRemaining(scope.row) + "天)" : "已完成"}}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180" align="right">
					<template slot-scope="scope">
						<div v-if="scope.row.editing">
							<el-button type="text" icon="el-icon-check" title="保存" @click="update(scope.$index, 1)"></el-button>
							<el-button type="text" icon="el-icon-close" title="取消" @click="update(scope.$index, 0)"></el-button>
						</div>
						<div v-if="!scope.row.editing">
							<el-button type="text" icon="el-icon-circle-check" title="完成" @click="changeStatus(scope.row, 1)"></el-button>
							<el-button type="text" icon="el-icon-refresh-left" title="重置" @click="changeStatus(scope.row, 0)"></el-button>
							<el-button type="text" icon="el-icon-edit" title="编辑" @click="editModule(scope.row, scope.$index)"></el-button>
							<el-button type="text" icon="el-icon-delete" title="删除" @click="deleteModule(scope.row)"></el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
		</div>
	</div>
</template>

<script>
import {
	saveModule,
	getModule,
	deleteModule,
	updateModule
} from '../../../../service/projectManagerService';
import DateUtil from '../../../../../utils/date';
import Utils from '../../../../../utils/util.js';

export default {
	name: 'ProjectManager',
	components: {},
	data () {
		return {
			illustrationBg: '',
			form: {
				update: {
					projectName: '',
					moduleName: '',
					deadline: '',
					note: ''
				},
				create: {
					projectName: '',
					moduleName: '',
					deadline: '',
					note: ''
				},
				search: {
					projectName: '',
					moduleName: '',
					deadline: '',
					note: '',
					status: ''
				}
			},
			loading: {
				table: false
			},
			status: [
				{
					value: '0',
					label: '进行中'
				},
				{
					value: '1',
					label: '已完成'
				}
			],
			modules: [],
			createDialShowing: false
		};
	},
	created () {
		this.illustrationBg = `url('${Utils.getSettingCache('ImageServerUrl')}illustration-bg.jpg')`;
	},
	mounted () {
		this.searchTask();
	},
	methods: {
		formCheck () {
			if (!this.form.create.projectName) {
				this.$message.error('项目名称不能为空');
				return false;
			}
			if (!this.form.create.moduleName) {
				this.$message.error('功能模块名称不能为空');
				return false;
			}
			if (!this.form.create.deadline) {
				this.$message.error('计划完成时间不能为空');
				return false;
			}
			return true;
		},
		getTimeRemaining (row) {
			let diffVal =
				DateUtil.getTimeRemaining(
					row.deadline,
					DateUtil.formatDate(new Date(), 'yyyy-MM-dd')
				) + 1;
			let diffStr = (diffVal > 0 ? '剩余' : '逾期') + Math.abs(diffVal);
			return diffStr;
		},
		changeStatus (row, status) {
			let self = this;
			let params = {
				id: row.id,
				status: status,
				updateTime: DateUtil.formatDate(
					new Date(),
					'yyyy-MM-dd hh:mm:ss'
				)
			};
			updateModule(params)
				.then(data => {
					if (data.status === 200) {
						self.searchTask();
					} else {
						self.$notify.error('服务器内部异常！');
					}
				})
				.catch(e => {
					self.$message.error('项目管理页面-更新操作出错了：' + e);
				});
		},
		editModule (row, index) {
			this.modules[index].editing = true;
			this.form.update = Utils.deepClone2(this.modules[index]);
		},
		update (index, status) {
			let self = this;
			self.modules[index].editing = false;
			if (status === 1) {
				let params = {
					id: self.form.update.id,
					projectName: self.form.update.projectName,
					moduleName: self.form.update.moduleName,
					deadline: self.form.update.deadline,
					note: self.form.update.note
				};
				updateModule(params)
					.then(data => {
						if (data.status === 200) {
							self.searchTask();
						} else {
							self.$notify.error('服务器内部异常！');
						}
					})
					.catch(e => {
						self.$message.error(
							'项目管理页面-更新操作出错了：' + e
						);
					});
			}
		},
		searchTask () {
			let self = this;
			let params = {
				projectName: self.form.search.projectName,
				moduleName: self.form.search.moduleName,
				deadline: self.form.search.deadline,
				status: self.form.search.status
			};
			self.loading.table = true;
			getModule(params)
				.then(data => {
					if (data.status === 200) {
						let modules = [];
						data.resultList.forEach(o => {
							let module = o;
							module.editing = false;
							modules.push(module);
						});
						self.modules = modules;
						self.loading.table = false;
					} else {
						self.$notify.error('服务器内部异常！');
					}
				})
				.catch(e => {
					self.$message.error('项目管理页面-查询操作出错了：' + e);
					self.loading.table = false;
				});
		},
		createTask () {
			let self = this;
			if (!self.formCheck()) {
				return;
			}
			let params = {
				projectName: self.form.create.projectName,
				moduleName: self.form.create.moduleName,
				deadline: self.form.create.deadline,
				note: self.form.create.note,
				createTime: DateUtil.formatDate(
					new Date(),
					'yyyy-MM-dd hh:mm:ss'
				),
				status: 0
			};
			saveModule(params)
				.then(data => {
					if (data.status === 200) {
						self.searchTask();
					} else {
						self.$notify.error('服务器内部异常！');
					}
					self.createDialShowing = false;
					self.searchTask();
				})
				.catch(e => {
					self.$message.error('项目管理页面-创建操作出错了：' + e);
				});
		},
		deleteModule (row) {
			let self = this;
			let params = {
				id: row.id
			};
			deleteModule(params)
				.then(data => {
					if (data.status === 200) {
						self.searchTask();
					} else {
						self.$notify.error('服务器内部异常！');
					}
				})
				.catch(e => {
					self.$message.error('项目管理页面-删除操作出错了：' + e);
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.project-manager {
	.form-box {
		width: 100%;
		background: #edecff;
		padding: 22px 80px 0;

		.create-bt,
		.search-bt {
			margin-left: 10px;
		}
	}

	.table-box {
		height: calc(100% - 84px);
		width: 100%;
		padding: 40px 80px;

		.working {
			color: mediumblue;
		}

		.finished {
			color: green;
		}

		.color-animation,
		.rotate-animation {
			animation-iteration-count: infinite;
		}
		.color-animation {
			animation-name: colors;
			animation-duration: 6s;
			animation-timing-function: linear;
		}

		@keyframes colors {
			0% {
				color: blue;
				margin-left: 0;
				opacity: 0;
			}
			50% {
				color: green;
				opacity: 1;
			}
			100% {
				color: green;
				margin-left: 80px;
				opacity: 0;
			}
		}

		.rotate-animation {
			display: inline-block;
			animation-name: rotate;
			animation-duration: 6s;
			animation-timing-function: ease-in-out;
		}
	}

	.modal-box {
		height: 470px;
		.form-panel {
			float: left;
			width: 60%;
			height: 100%;

			.form-header {
				height: 80px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 20px;
			}

			.form-style {
				padding: 0px 40px;
			}
		}

		.desc-panel {
			float: left;
			width: 40%;
			height: 100%;
			background: no-repeat 56%;
			background-size: auto 100%;
		}
	}
}
</style>
